$simple-switch_color: #f44336 !default;
$simple-switch_focus-color: #03A9F4 !default;
$simple-switch_focus-ring-size: 7px !default;
$simple-switch_handle-color: #fff !default;
$simple-switch_outline-size: 3px !default;
// this is just a default value/fallback for older browsers
$simple-switch_size: 12px !default;
$simple-switch_switch-speed: 250ms !default;
$simple-switch_tray-color: #ccc !default;


// Hide the checkbox, but keep it in the DOM so it is visible to screen readers
._simple-switch-checkbox {
    height: 0px;
    width: 0px;
    overflow: hidden;
    opacity: 0;
}

._simple-switch-track {
    --simple-switch_size: #{$simple-switch_size};

    font-size: inherit;
    display: inline-block;
    position: relative;
    vertical-align: baseline;
    background: $simple-switch_tray-color;
    border-radius: $simple-switch_size;
    padding: 0 calc((#{$simple-switch_size} * 1.25) - #{$simple-switch_outline-size * 2}) 0 0;
    border: #{$simple-switch_outline-size} solid $simple-switch_tray-color;
    transition: background $simple-switch_switch-speed ease-out;
    outline: none;
    box-sizing: padding-box;

    @supports(--foobar: false) {
        border-radius: var(--simple-switch_size);
        padding: 0 calc((var(--simple-switch_size) * 1.25) - #{$simple-switch_outline-size * 2}) 0 0;
    }

    &.on {
        background: $simple-switch_color;
        border: #{$simple-switch_outline-size} solid $simple-switch_color;

        .handle {
            transform: translateX(calc((#{$simple-switch_size} * 1.25) - #{$simple-switch_outline-size * 2}));

            @supports(--foobar: false) {
                transform: translateX(calc((var(--simple-switch_size) * 1.25) - #{$simple-switch_outline-size * 2}));
            }
        }
    }

    &.focus {
        border: #{$simple-switch_outline-size} solid $simple-switch_focus-color;
    }

    .handle {
        position: relative;
        width: calc(#{$simple-switch_size - ($simple-switch_outline-size * 2)});
        height: calc(#{$simple-switch_size - ($simple-switch_outline-size * 2)});
        border-radius: $simple-switch_size;
        background: $simple-switch_handle-color;
        display: block;
        transition: transform $simple-switch_switch-speed ease-out;
        will-change: transition;
        z-index: 2;

        @supports(--foobar: false) {
            width: calc(var(--simple-switch_size) - #{$simple-switch_outline-size * 2});
            height: calc(var(--simple-switch_size) - #{$simple-switch_outline-size * 2});
            border-radius: var(--simple-switch_size);
        }
    }

    // Material mode (makes the Switch match the material.io spec)
    &._material {
        padding: 0;
        margin: $simple-switch_outline-size 0;
        height: #{$simple-switch_size - $simple-switch_outline-size};
        width: #{$simple-switch_size * 1.5};
        border: none;
        vertical-align: top;

        @supports(--foobar: false) {
            height: calc(var(--simple-switch_size) - #{$simple-switch_outline-size});
            width: calc(var(--simple-switch_size) * 1.5);
        }

        &.on {
            background: $simple-switch_color;

            &:after {
                transform: translateX(#{$simple-switch_size - $simple-switch_outline-size});

                @supports(--foobar: false) {
                    transform: translateX(calc(var(--simple-switch_size) - #{$simple-switch_outline-size}));
                }
            }

            .handle {
                background: darken($simple-switch_color, 15%);
                transform: translateX(#{$simple-switch_size - $simple-switch_outline-size});

                @supports(--foobar: false) {
                    transform: translateX(calc(var(--simple-switch_size) - #{$simple-switch_outline-size}));
                }
            }
        }

        // this represents the focus state ring
        &:after {
            $_extra: $simple-switch_focus-ring-size;

            content: "";
            position: absolute;
            top: #{(-0.75 * $simple-switch_outline-size) - $_extra};
            left: #{(-1 * $simple-switch_outline-size) - $_extra};
            width: ($simple-switch_size + ($_extra * 2));
            height: ($simple-switch_size + ($_extra * 2));
            z-index: 1;
            background: rgba(0, 0, 0, 0.125);
            border-radius: ($simple-switch_size + ($_extra * 2));
            opacity: 0;
            will-change: opacity;
            transition: opacity $simple-switch_switch-speed ease-out,
                        transform $simple-switch_switch-speed ease-out;

            @supports(--foobar: false) {
                width: calc(var(--simple-switch_size) + #{$_extra * 2});
                height: calc(var(--simple-switch_size) + #{$_extra * 2});
                border-radius: calc(var(--simple-switch_size) + #{$_extra * 2});
            }
        }

        &.focus:after {
            opacity: 1;
        }

        .handle {
            position: absolute;
            top: #{-0.75 * $simple-switch_outline-size};
            left: #{-1 * $simple-switch_outline-size};
            width: $simple-switch_size;
            height: $simple-switch_size;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
            transition: transform $simple-switch_switch-speed ease-out,
                        background $simple-switch_switch-speed ease-out;

            @supports(--foobar: false) {
                width: var(--simple-switch_size);
                height: var(--simple-switch_size);
            }
        }
    }
}
